<% content_for :content do %>

  <!-- widget grid -->
  <section id="widget-grid" class="">
    
    <div class="row">
      <div class="col-sm-12">
        <div class="well">

          <%= simple_form_for :report, url: url_for(:only_path => false, :overwrite_params=>nil), :defaults => { :input_html => { :class => "form-control" } }, method: 'get', html: { class: "form-inline" } do |f| %>
            <label>地区</label>
            <%= f.input_field :city, selected: params[:report][:city], collection: City.all.map{|city| [city.name,city.id] }, prompt: '全部' %>
            <label>行业</label>
            <%= f.input_field :industry, selected: params[:report][:industry], collection: TerminalGroup.uniq.pluck('industry').compact, prompt: '全部' %>
            <label>分组名</label>
            <%= f.input_field :group_name, selected: params[:report][:group_name], collection: TerminalGroup.pluck('group_name').compact, prompt: '全部' %>
            <label>终端</label>
            <%= f.input_field :terminal, selected: params[:report][:terminal], collection: Terminal.pluck('mac').compact, prompt: '全部' %>
            <label>日期类型</label>
            <%= f.input_field :date_part, collection: {"day" => '天',"month" => '月',"year" => '年'}.collect{|k,v| [v,k]}, selected: (params[:report][:date_part] || 'day') %>
            <div class="form-group string">
              <%= f.text_field :start_date, class: 'form-control datepicker', "data-dateformat" => "yy-mm-dd",  value: params[:report][:start_date], placeholder: "开始时间" %>
            </div>
            <div class="form-group string">
              <%= f.text_field :end_date, class: 'form-control datepicker', "data-dateformat" => "yy-mm-dd", value: params[:report][:end_date], placeholder: "结束时间" %>
            </div>
            <%= f.submit "搜索", :class => "btn btn-default"%>
          <% end %>

        </div> <!-- end well div -->

      </div>
    </div>

    <!-- row -->
    <div class="row">
      <% if @register_chart_attrs %>
      <!-- NEW WIDGET START -->
      <article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        
        <!-- Widget ID (each widget will need unique ID)-->
        <div class="jarviswidget jarviswidget-color-blueDark" id="wid-id-0" data-widget-editbutton="false" data-widget-colorbutton="false" data-widget-deletebutton="false">
          <!-- widget options:
          usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">
  
          data-widget-colorbutton="false"
          data-widget-editbutton="false"
          data-widget-togglebutton="false"
          data-widget-deletebutton="false"
          data-widget-fullscreenbutton="false"
          data-widget-custombutton="false"
          data-widget-collapsed="true"
          data-widget-sortable="false"
  
          -->
          <header>
            <span class="widget-icon"> <i class="fa fa-bar-chart-o"></i> </span>
            <h2><%= @register_chart_attrs[:title] %></h2>
  
          </header>
  
          <!-- widget div-->
          <div>
  
            <!-- widget edit box -->
            <div class="jarviswidget-editbox">
              <!-- This area used as dropdown edit box -->
  
            </div>
            <!-- end widget edit box -->
  
            <!-- widget content -->
            <div class="widget-body no-padding">

              <%= render :partial => 'charts/line_container',:locals => {:chart_attrs => @register_chart_attrs,:page_id => 'register_'} %>
  
            </div>
            <!-- end widget content -->
  
          </div>
          <!-- end widget div -->
  
        </div>
        <!-- end widget -->
        
      </article>
      <!-- WIDGET END -->
      <% end %>
      <% if @signin_chart_attrs %>
      <!-- NEW WIDGET START -->
      <article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
  
        <!-- Widget ID (each widget will need unique ID)-->
        <div class="jarviswidget jarviswidget-color-blueDark" id="wid-id-1" data-widget-editbutton="false" data-widget-colorbutton="false" data-widget-deletebutton="false">
          <!-- widget options:
          usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">
  
          data-widget-colorbutton="false"
          data-widget-editbutton="false"
          data-widget-togglebutton="false"
          data-widget-deletebutton="false"
          data-widget-fullscreenbutton="false"
          data-widget-custombutton="false"
          data-widget-collapsed="true"
          data-widget-sortable="false"
  
          -->
          <header>
            <span class="widget-icon"> <i class="fa fa-bar-chart-o"></i> </span>
            <h2><%= @signin_chart_attrs[:title] %></h2>
  
          </header>
  
          <!-- widget div-->
          <div>
  
            <!-- widget edit box -->
            <div class="jarviswidget-editbox">
              <!-- This area used as dropdown edit box -->
  
            </div>
            <!-- end widget edit box -->
  
            <!-- widget content -->
            <div class="widget-body no-padding">

              <%= render :partial => 'charts/line_container',:locals => {:chart_attrs => @signin_chart_attrs,:page_id => 'signin_'} if @signin_chart_attrs %>
  
            </div>
            <!-- end widget content -->
  
          </div>
          <!-- end widget div -->
  
        </div>
        <!-- end widget -->
  
      </article>
      <!-- WIDGET END -->
      <% end %>
  
    </div>
  
    <!-- end row -->
  
  </section>
  <!-- end widget grid -->
<% end %>

<% content_for :js do %>
  
  <script type="text/javascript">
  
    $(document).ready(function(){
      $("#report_city").change(function() {
        $.ajax({
          type: "GET",
        url: "report_groups/city_changed",
          data: { city: this.value }
        })
          .done(function( msg ) {
            $("#report_industry").html(msg.split(" and ")[0])
            $("#report_group_name").html(msg.split(" and ")[1])
            $("#report_terminal").html(msg.split(" and ")[2])
          });
      });

      $("#report_industry").change(function() {
        $.ajax({
          type: "GET",
        url: "report_groups/industry_changed",
          data: { city: $("#report_city").value, industry: this.value }
        })
          .done(function( msg ) {
            $("#report_group_name").html(msg.split(" and ")[0])
            $("#report_terminal").html(msg.split(" and ")[1])
          });
      });

      $("#report_group_name").change(function() {
        $.ajax({
          type: "GET",
        url: "report_groups/group_name_changed",
          data: { city: $("#report_city").value, industry: $("#report_industry").value,group_name: this.value }
        })
          .done(function( msg ) {
            $("#report_terminal").html(msg)
          });
      });

    });

  </script>
<% end %>